<template>
  <div>
     <zujian1></zujian1>
     <zujian2></zujian2>
     <zujian3 name="张三"></zujian3>
  </div>
</template>

<script>
// 1. 导入 Vue (虽然在这个特定例子中，我们最终不会直接使用它，但这是一个好习惯)
import Vue from 'vue';

// 2. 定义你的子组件 (通常我们会把它放在一个单独的 .vue 文件里)
//    注意：template 必须是一个完整的 HTML 片段
//这种方式的组件需要注册   这是局部组件
const Zujian1 = {
  template: '<div>这是组件 1 的内容</div>'
};

//全局组件不需要注册
Vue.component("zujian2",{
  template:"<div>zujian2</div>"
})

Vue.component("zujian3",{
   props:["name"],
   template:"<h1>{{name}}你好<h1>",
});

export default{
  name:"Zujian",
  data(){
    return {
      msg:"zujian",
    }
  },
  // 3. 在父组件的 components 选项中进行局部注册
    components: {
      // 注册后，<zujian1> 标签才能在上面的 template 中使用
      // key 是组件名，value 是组件对象
      zujian1: Zujian1,
      // ES6 语法糖，如果 key 和 value 同名，可以简写为：
      // Zujian1
      // 但模板中需要使用 <zujian1> 或 <Zujian1> (HTML 不区分大小写)

    }

}
</script>

<style>
</style>
